<template>
  <div class="table">
    <div class="self-info">
      <div class="name">{{ tableData.userName }}</div>
      <div class="org-name">部门：{{ tableData.orgName }}</div>
    </div>
    <div class="eva-info">
      <div class="li-box">
        <div class="box-title">第一季度评价：</div>
        <div class="box-info">
          <div class="info-li">
            <div class="post">
              <span v-if="tableData.showMode === 1">部门负责人：</span>
              <span v-else>分管负责人：</span>
            </div>
            <div class="level">{{ tableData.leaderRank1 | AssessRank }}</div>
          </div>
          <div class="info-li">
            <div class="post">
              <span v-if="tableData.showMode === 1">分管负责人：</span>
              <span v-else>单位主要负责人：</span>
            </div>
            <div class="level">{{ tableData.mainLeaderRank1 | AssessRank }}</div>
          </div>
        </div>
      </div>
      <div class="li-box" v-if="quarterNow > 1">
        <div class="box-title">第二季度评价：</div>
        <div class="box-info">
          <div class="info-li">
            <div class="post">
              <span v-if="tableData.showMode === 1">部门负责人：</span>
              <span v-else>分管负责人：</span>
            </div>
            <div class="level">{{ tableData.leaderRank2 | AssessRank }}</div>
          </div>
          <div class="info-li">
            <div class="post">
              <span v-if="tableData.showMode === 1">分管负责人：</span>
              <span v-else>单位主要负责人：</span>
            </div>
            <div class="level">{{ tableData.mainLeaderRank2 | AssessRank }}</div>
          </div>
        </div>
      </div>
      <div class="li-box" v-if="quarterNow > 2">
        <div class="box-title">第三季度评价：</div>
        <div class="box-info">
          <div class="info-li">
            <div class="post">
              <span v-if="tableData.showMode === 1">部门负责人：</span>
              <span v-else>分管负责人：</span>
            </div>
            <div class="level">{{ tableData.leaderRank3 | AssessRank }}</div>
          </div>
          <div class="info-li">
            <div class="post">
              <span v-if="tableData.showMode === 1">分管负责人：</span>
              <span v-else>单位主要负责人：</span>
            </div>
            <div class="level">{{ tableData.mainLeaderRank3 | AssessRank }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HistoryTable',
  components: {},
  props: {
    tableData: {
      type: Object,
      default: () => {},
    },
    quarterNow: Number,
  },
  data() {
    return {
      busSign: '',
    }
  },
  computed: {},
  watch: {
    tableData: {
      handler(news) {
        // console.log(news)
      },
      deep: true,
      immediate: true,
    },
  },
  filters: {
    AssessRank(val) {
      switch (val) {
        case '1':
          return '好'
        case '2':
          return '较好'
        case '3':
          return '一般'
        case '4':
          return '较差'
        case '':
          return '-'
        default:
          break
      }
    },
  },
  created() {
    this.busSign = this.$route.query.busSign
  },
  mounted() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.table {
  // font-size: 14px;
  padding: 0 15px;
  max-height: 40vh;
  overflow-y: auto;
  .self-info {
    color: #1989fa;
    display: flex;
    align-items: center;
    margin-top: 8px;
    font-size: 14px;
    .name {
      margin-right: 12px;
    }
  }
  .eva-info {
    .li-box {
      margin: 10px 0;
      .box-title {
        margin-top: 8px;
      }
      .box-info {
        // margin: 12px 0;
        // display: flex;
        // align-items: center;
        // justify-content: space-around;
        border-bottom: 1px solid #cccccc;
        .info-li {
          display: flex;
          align-items: center;
          margin: 12px 0;
          .level {
            display: inline-block;
            border: 1px solid #cccccc;
            color: #f59a23;
            border-radius: 5px;
            width: 45px;
            height: 25px;
            text-align: center;
            line-height: 25px;
          }
        }
      }
    }
  }
}
</style>
